<%@ page language="java" import="cn.dreamblog.pojo.User" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 88555
  Date: 2019/11/5
  Time: 17:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>梦博客—不要怀有渺小的梦想，它们无法打动人心。——歌德</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link href="/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-confirm/3.2.3/jquery-confirm.min.js "></script>
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var myModel = {"pageInfo": []};
            var blogTypeModel = {"blogTypeList": []};

            var vm = new Vue({
                el: "#blogList",
                data: myModel,
                methods: {
                    queryBlogList: function (data) {
                        queryBlogList(data);
                    },
                    dianzan: function (blog_id) {
                        dianzan(blog_id);
                    },
                    getImgUrl: function (imageName) {
                        var url = '/imageName/' + imageName;
                        return url;
                    },
                    getBlogId: function (blog_id) {
                        var id = "dianzan-txt-" + blog_id;
                        return id;
                    }
                }
            });

            var blogtypeNav = new Vue({
                el: "#blogTypeList",
                data: blogTypeModel,
                methods: {
                    queryTypeList: function () {
                        queryTypeList();
                    },
                    setTypeId: function (i) {
                        $('#blogtype_id').val(i);
                        $(".active").removeClass("active");
                        $("[index = " + (i - 1) + "]").addClass("active");
                        queryBlogList(1, i);
                    }
                }
            })

            function queryBlogList(pageIndex, blogtype_id) {
                var mydata = {
                    "pageIndex": pageIndex,
                    "blogtype_id": blogtype_id
                };
                $.post("/blog/list.do", mydata, function (result) {
                    myModel.pageInfo = result.pageInfo;
                }, "JSON")
            }

            function queryTypeList() {
                $.post("/blogtype/queryblogtype.do", function (result) {
                    blogTypeModel.blogTypeList = result;
                }, "JSON")
            }

            //第一次显示数据
            queryBlogList(1, 0);
            //第一次显示类型
            queryTypeList();

            $('#go').click(function () {
                var pageIndexgo = $('#pageIndexgo').val();
                var pageCount = $('#pageCount').val();
                var blogtype_id = $('#blogtype_id').val();
                if (pageIndexgo >= pageCount) {
                    queryBlogList(pageCount);
                } else if (pageIndexgo <= 1) {
                    queryBlogList(1, blogtype_id);
                } else {
                    queryBlogList(pageIndexgo, blogtype_id);
                }
            });

            $('#one').click(function () {
                var blogtype_id = $('#blogtype_id').val();
                queryBlogList(1, blogtype_id);
            });

            $("body").on("click", "#prevone", function () {
                var blogtype_id = $('#blogtype_id').val();
                var pageIndex = $('#pageIndex').val();
                queryBlogList(parseInt(pageIndex) - 1, blogtype_id);
            });

            $("body").on("click", "#nextone", function () {
                var blogtype_id = $('#blogtype_id').val();
                var pageIndex = $('#pageIndex').val();
                queryBlogList(parseInt(pageIndex) + 1, blogtype_id);
            });

            $('#lastone').click(function () {
                var pageCount = $('#pageCount').val();
                var blogtype_id = $('#blogtype_id').val();
                queryBlogList(pageCount, blogtype_id);
            });

            function dianzan(blog_id) {
                var goodCount = 0;
                var user_id=$("#user_id").val();
                if (user_id == null || user_id == '') {
                    if (confirm("请先登录再进行点赞！")) {
                        $(location).attr("href", "/jsp/login.jsp");
                    }
                } else {
                    var mydata = {
                        "blog_id": parseInt(blog_id),
                        "user_id": user_id,
                    }
                    $.post("/goodstatus/goods.do", mydata, function (result) {
                        if (result != null) {
                            if (result.goodStatus == 'successed'){
                                alert("您已经为这篇博客点过赞了，请勿重复点赞");
                                goodCount = result.goodCount;
                                $("#bloggoodCount").val(goodCount);
                                $("#dianzan-txt-"+ blog_id).text($("#bloggoodCount").val());
                            } else if(result.goodStatus == 'failed') {
                                alert("点赞成功！");
                                goodCount = result.goodCount;
                                $("#bloggoodCount").val(goodCount);
                                $("#dianzan-txt-"+ blog_id).text(goodCount);
                            }
                        }
                    }, 'JSON')
                    return goodCount;
                }
            }
        })
    </script>
    <link href="/css/bootstrap.min.css" type="text/css">
    <style type="text/css">
        body {
            background-color: rgb(235, 235, 235);
            margin: 30px 0px;
        }

        nav {
            width: 100px;
        }

        nav * {
            font-family: PingFang SC, Hiragino Sans GB, Arial, Microsoft YaHei, Verdana, Roboto, Noto, Helvetica Neue, sans-serif !important;
        }

        nav ul {
            list-style: none;
        }

        nav ul li {
            background-color: white;
            padding-top: 8px;
            text-align: center;
            display: block;
            width: 99px;
            height: 33px;
            margin-bottom: 1px;
        }

        nav ul .active a {
            color: white;
        }

        nav ul li a {
            color: darkgray;
            font-size: 15px;
        }

        nav ul li a:hover {
            color: white;
            text-decoration: none;
        }

        nav ul li a:hover a {
            color: white;
            text-decoration: none;
        }

        nav .active {
            background-color: black;
        }

        nav li:hover {
            background-color: black;
        }

        nav li:hover a {
            color: white;
            text-decoration: none;
        }

        .row > col-md-3 {
            width: 400px;
        }

        .navbar-nav nav navbar-collapse navbar-right {
            overflow: auto;
            margin-right: 100px;
        }

        #nav {
            width: 150px;
        }

        #dianzan {
            width: 70px;
            height: 50px;
            position: relative;
            top: -7px;
        }

        #dianzan-txt {
            position: relative;
            top: 2px;
        }
    </style>
</head>
<body>
<input id="user_id" type="hidden" value="${sessionScope.user.user_id}">
<input id="blogtype_id" type="hidden" value="0">
<input id="bloggoodCount" type="hidden" value="0">
<div class="container">
    <div class="navbar navbar-inverse navbar-fixed-top">
        <%--  Brand and toggle get grouped for better mobile display --%>
        <div class="navbar-header">
            <img class="navbar-brand" src="/img/logo1.png" style="width: 100px; height: 55px;" alt="">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"
                    aria-expanded="false">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <ul class="navbar-nav nav navbar-collapse navbar-right">
            <li><a class="active" href="/jsp/index.jsp">首页</a></li>
            <li><a class="" href="/jsp/index.jsp">论坛</a></li>
            <li><a class="" href="/jsp/index.jsp">下载</a></li>
            <li><a class="" href="/jsp/index.jsp">个人中心</a></li>
            <li><a class="" href="/jsp/index.jsp">关于我们</a></li>
            <c:choose>
                <c:when test="${sessionScope.user != null}">
                    <a href="/jsp/index.jsp" class="navbar-text navbar-link"
                       style="margin-right: 30px" id="dropdownMenu1" data-toggle="dropdown" data-hover="dropdown"><img
                            class="img-circle" style="margin-right: 20px"
                            width="20px"
                            src="/imageName/${sessionScope.user.imageName}"
                            alt="">${sessionScope.user.nickName}
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                        <li class=""><a href="/jsp/index.jsp">个人中心</a></li>
                        <li class=""><a href="/user/logout.do">退出</a></li>
                    </ul>
                </c:when>
                <c:otherwise>
                    <a href="/jsp/login.jsp" class="navbar-text navbar-link" style="margin-right: 30px">登录</a>
                </c:otherwise>
            </c:choose>
        </ul>
    </div>
    <nav id="nav" style="position:fixed; left: 10px; margin-top: 100px;">
        <div id="blogTypeList">
            <div class="nav_com">
                <ul>
                    <li class="active"><a href="/jsp/index.jsp">推荐</a></li>
                    <li class="" v-for="(item,index) in blogTypeList" :index="index">
                        <a @click="setTypeId(item.blogtype_id)" href="javascript:;">
                            {{item.typeName}}
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div id="blogList" style="margin-top: 75px">
        <div class="container" v-for="(b,index) in pageInfo.list">
            <hr width="1200px" style="border: 1px solid black"/>
            <div class="row">
                <div class="col-md-6">发表时间:{{b.releaseDate}}&nbsp;&nbsp;&nbsp;发表用户:<a href="/jsp/index.jsp"><img
                        :src="getImgUrl(b.user.imageName)" class="img-circle" width="30px" style="margin: 0 10px">{{b.user.nickName}}</a>
                </div>
                <div class="col-md-6">浏览量:{{b.readCount}}</div>
                <br>
                <div class="col-md-6"><h4>标题:{{b.title}}</h4></div>
                <br>
            </div>
            <div class="row">
                <br>
                <div class="col-md-6">内容:{{b.content}}</div>
                <div class="col-md-6">类型:{{b.blogtype.typeName}}</div>
                <br>
            </div>
            <br><br>
            <div class="row">
                <div class="col-md-2">
                    <div id="dianzan">
                        <a href="javascript:;" @click="dianzan(b.blog_id)"><img src="/img/good-fill-zan.png" alt=""></a>
                        <span :id="getBlogId(b.blog_id)">{{b.goodCount}}</span>
                    </div>
                </div>
                <div class="col-md-2">评论:&nbsp;{{b.commentCount}}</div>
            </div>
            <br><br>
        </div>
        <br>
        <input type="hidden" id="pageIndex" v-model="pageInfo.pageNum"/>
        <input type="hidden" id="pageCount" v-model="pageInfo.pages"/>

        <div class="container" style="padding-left: 350px">
            <button id="one">首页</button>
            <span v-if="pageInfo.hasPreviousPage">
			<button id="prevone">上一页</button>
		</span>
            <button v-for="index in pageInfo.pages" v-on:click="queryBlogList(index)">
                {{ index }}
            </button>
            <span v-if="pageInfo.hasNextPage">
			<button id="nextone">下一页</button>
		</span>
            <button id="lastone">末页</button>
            <input id="pageIndexgo" type="text" style="width: 40px"/>
            <button id="go">go</button>
        </div>
    </div>
</div>
</body>
</html>
